<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的动态绑定</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            // $('.button').bind('click',function () {//第一种方法 给多个button绑定事件
            //     alert("我是button");
            // });
            // $('.box').bind('click',function () {//第二种方法 给多个button绑定事件 通过冒泡 给父元素绑定事件 其子元素都会执行
            //     alert("我是button");
            // });
            // $('.button').on('click',function () {//第三种方法 在jquery高级版本中用on
            //     alert("我是button");
            // });
            // $('.button').on('click',{'user':'Xiao'},function (event) {//可以添加 参数
            //     alert("我是button:"+event.data.user);
            // });
            // $('.button').on('mouseover mouseout',function (event) {//事件更改也可以
            //     alert("我是button");
            // });

            //绑定多个事件  单独的绑定  第一种方法
            // $('.button').on({
            //     mouseover:function () {
            //         alert('mouseover');
            //     },
            //     mouseout:function () {
            //         alert('mouseout');
            //     }
            // });
            //绑定多个事件  动态绑定 利用冒泡
            // $('.box').on('click','.button',function () {//动态绑定
            //     alert('123');
            // });
            //
            // $('.box').off('click','.button');// 移出

            $('.box').one('click','.button',function () {//只执行一次
                alert('one click');
            });
        });
    </script>
</head>
<body>
    <div class="box" style="width: 200px;height: 200px;background-color: gray">
        <input class="button" type="button" value="按键">
        <input class="button" type="button" value="按键">
        <input class="button" type="button" value="按键">
    </div>
    <script>
 /*  一.给多个相同属性的元素 绑定事件的方法
            第1种   $('.button').bind('click',function () {
                         alert("我是button");
                       });
            第2种   利用冒泡 绑定父元素
                     $('.box').bind('click',function () {
                         alert("我是button");
                        });
            第3种 利用on jquery的高级版本中使用
                    $('.button').on('click',function () {/
                        alert("我是button");
                        });
                   可以传递参数进去
                        $('.button').on('click',{'user':'xiao'},function (event) {
                            alert("我是button"+event.data.user);
                        });

   二.事件的动态绑定
    1.动态绑定    $('.button').on({
                 mouseover:function () {
                    alert('mouseover');
                },
                mouseout:function () {
                    alert('mouseout');
                }
                });
        2.移出
            $('.box').off('click','.button');
        3.one只执行一次
                $('.box').one('click','.button',function () {
                     alert('one click');
                });
        * */
    </script>
</body>
</html>